<template>
  <div class="sticky z-10 top-0 header">
    <navBar>
      <template #right>
        <img :src="cardSrc" class="w-5 h-5 mr-4" alt="" @click="goToCart" />
        <img :src="mineSrc" class="w-5 h-5" alt="" />
      </template>
    </navBar>
    <div class="mt-2 pt-3 pb-1 bg-white rounded-lg flex flex-col items-center mx-4 w-[calc(100%-2rem)]">
      <div class="w-4/5 min-h-12 rounded-full border border-gray-200 flex items-center justify-center pl-4">
        <img :src="searchSrc" class="w-6 h-6" alt="" />
        <input :value="iccid" @input="handleInput" type="text" class="w-full h-full pl-4" :placeholder="$t('query.searchText')" />
      </div>

      <van-field
        v-model="date"
        input-align="right"
        readonly
        is-link
        class="flex-1 px-0 w-4/5 bg-transparent"
        label="查询日期"
        @click="showCalendar = true" />
    </div>

    <van-calendar class="z-50" v-model="showCalendar" type="range" @confirm="onConfirm" />
  </div>
</template>

<script>
import { Field, Calendar } from "vant"
import dayjs from "dayjs"
export default {
  components: {
    [Field.name]: Field,
    [Calendar.name]: Calendar,
  },
  data() {
    return {
      cardSrc: require("@/assets/images/card-icon.png"),
      mineSrc: require("@/assets/images/mine-icon.png"),
      date: "",
      showCalendar: false,

      searchActive: 0,
      searchSrc: require("@/assets/images/search-icon.png"),

    }
  },
  props: {
    iccid: {
      type: String,
      default: "",
    },
  },
  computed: {},
  methods: {
    onConfirm(date) {
      const [start, end] = date
      this.showCalendar = false
      this.date = `${dayjs(start).format("YYYY-MM-DD")} - ${dayjs(end).format("YYYY-MM-DD")}`
    },
    goToCart() {
      this.$router.push("/cart")
    },
    handleInput(event) {
      this.$emit("input", event.target.value)
    },
  },
  mounted() {},
}
</script>

<style scoped>
.header {
  background-color: #f7fafc;
}
</style>
